<template>
  <div class="login">
    <div class="logo">
      <img src="../../assets/kk.png" alt />
    </div>
    <div class="sm_con">
      <div class="m-input-box">
        <img class="tt1" src="../../assets/account.png" alt />
        <input class="m-input" type="text" placeholder="请输入手机" maxlength="40" v-model="mobile" />
      </div>
      <div class="m-input-box">
        <img class="tt2" src="../../assets/yzm.png" alt />
        <input class="m-input" type="text" placeholder="请输入验证码" maxlength="16" v-model="yzm" />
        <div class="get_code" v-show="sendAuthCode" @click="get_code">获取验证码</div>
        <div class="get_code" v-show="!sendAuthCode" @click="get_code">{{auth_time}}秒重新获取</div>
      </div>
      <div class="m-input-box">
        <img class="tt1" src="../../assets/mima.png" alt />
        <input class="m-input" type="password" placeholder="请输入新密码" maxlength="40" v-model="pass" />
      </div>
      <div class="loginto" @click="login()">确认</div>
      <div class="l_bo">
        <div class="psd_login">
          <router-link to="/pwd_login">密码登录</router-link>
        </div>
        <div class="reg">
          <router-link to="/register">注册账号</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      istrue: true,
      mobile: "",
      yzm: "",
      pass: "",
      modalShow: true,
      sendAuthCode: true,
      auth_time: 0
    };
  },
  created() {},
  methods: {
    get_code: function() {
      this.sendAuthCode = false;
      this.auth_time = 60;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    }
  },
  mounted: function() {}
};
</script>
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.login {
  background: url("../../assets/login_bg.png") no-repeat fixed;
  background-size: cover;
  min-height: 100%;
  .sm_con {
    width: 88%;
    margin: auto;
  }
  .logo {
    img {
      width: 3.413333rem;
      height: 3.706667rem;
      margin-top: 0.8rem;
    }
  }
  color: #fff;
  .m-input-box {
    .f-flex();
    position: relative;
    padding-top: 0.106667rem;
    padding-bottom: 0.106667rem;
    margin-top: 1.333333rem;
    border-bottom: 1px solid #fff;
    .tt1 {
      width: 0.506667rem;
      height: 0.586667rem;
      margin-right: 0.533333rem;
    }
    .tt2 {
      width: 0.506667rem;
      height: 0.586667rem;
      margin-right: 0.533333rem;
    }
    .m-input {
      width: 60%;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.4rem;
    }
    ::-webkit-input-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    :-moz-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    ::-moz-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    :-ms-input-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    .get_code {
      position: absolute;
      right: 0.2rem;
      font-size: 0.4rem;
      color: #fff;
    }
  }
  .loginto {
    height: 0.986667rem;
    .f-flex();
    background: #546ce3;
    justify-content: center;
    width: 100%;
    border: 1px solid #fff;
    margin-top: 2.133333rem;
    text-align: center;
    line-height: 0.986667rem;
    color: #fff;
    border-radius: 0.266667rem;
    font-size: 0.48rem;
  }
  .l_bo {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    font-size: 0.4rem;
    margin-top: 0.16rem;
    padding-bottom: 1rem;
    a {
      font-size: 0.4rem;
      color: #fff;
    }
  }
}
</style>
